<script>
import { artDetails } from "@/http/api";
import { showToast, showSuccessToast, showConfirmDialog } from "vant";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
export default {
  components: { load, getTimeOut },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      detailInfo: "",
    };
  },
  props: {},
  setup() {},
  methods: {
    convertBase64ToBlobURL(base64Data) {
      // 将Base64字符串转换为Blob对象
      const arr = base64Data.split(",");
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);

      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }

      const blob = new Blob([u8arr], { type: mime });
      // 创建URL
      return URL.createObjectURL(blob);
    },
    convertBase64(html) {
      const imgReg = /<img[^>]+src="data:image\/([^;]+);base64,([^"]+)"[^>]*>/g;
      return html.replace(imgReg, (match, p1, p2) => {
        const convertedURL = this.convertBase64ToBlobURL(
          "data:image/" + p1 + ";base64," + p2
        );
        return match.replace(
          "data:image/" + p1 + ";base64," + p2,
          convertedURL
        );
      });
    },
    backFn() {
      this.$router.back();
    },
    getData() {
      artDetails({ article_id: this.$route.query.id })
        .then((res) => {
          if (res.data.code == 1) {
            this.detailInfo = res.data.data.article_content;
            // this.detailInfo = this.convertBase64(res.data.data.article_content);
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <div class="container">
    <div class="showCont" v-if="!showTimeOut && showCont">
      <div class="formMain" v-html="detailInfo"></div>
      <div class="homeBtn" @click="backFn">返回</div>
    </div>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<style scoped lang="less">
.container {
  min-height: 100vh;
  background-color: #fff;
  .showCont {
    padding-bottom: 3rem;
    box-sizing: border-box;
    .formMain {
      padding: 0.75rem 4%;
      box-sizing: border-box;
    }
    .homeBtn {
      height: 2.2rem;
      width: 92%;
      line-height: 2.2rem;
      position: fixed;
      bottom: 0.75rem;
      left: 4%;
      border-radius: 0.25rem;
      background-color: #05a165;
      color: white;
      text-align: center;
      font-size: 0.6rem;
    }
  }
}
</style>
<style>
.formMain img {
  width: 100%;
}
</style>
